<template>
  <view class="wrapper">
    <scroll-view 
      scroll-y 
      class="scroll-wraper"
      @scrolltolower="loadMoreData"
      @refresherpulling="refreshData"
    >
      <view class="scroll-list">
        <template v-if="list && list.length > 0">
          <view v-for="order in list" :key="order.id" class="order-item content-box" @tap="toOrderDetail(order.id)">
            <view class="order-time">{{ order.payTime }}</view>
            <view class="order-c">
              <view class="product-list">
                <image v-for="product in (order.commodities || [])" :key="product.commodityId" class="product-logo" :src="product.iconsPic" />
              </view>
              <view class="right-cion"><uni-icons type="forward" size="30"></uni-icons></view>
            </view>
            <view class="desc">共{{getNums(order.commodities || [])}}件商品</view>
            <view class="amount">¥ {{ order.totals }}</view>
          </view>
        </template>
        <template v-else>
          <xl-empty empty-text="暂无订单" />
        </template>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
  import { ref, reactive } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import{ getStorage, setStorage } from "@/common/storage";
  import { isLogin, getWeiXinCode, wxLogin } from "@/common/util";
  import dayjs from "dayjs"; 
  import xlEmpty from "@/components/xl-empty.vue";
  
  const molds = 2;
  const containerId = ref('');
  const login = ref(isLogin());

  const list = ref([]);
  const hasMore = ref(false);
  const pager = reactive({
    page: 1,
    size: 20,
    total: 0
  });
  

  const getNums = (products) => {
    return products.reduce((p, v) => {
      return p + (v.nums || 0);
    }, 0)
  }

  const toOrderDetail = (orderId) => {
    uni.navigateTo({
      url: `/pages/mine/order-detail?orderId=${orderId}`
    });
  }

  const searchCallBack = (data, loadMore) => {
    if (loadMore) {
      list.value = [...list.value, ...(data.dataList || [])];
      pager.total = data.totalCount || 0;
    } else {
      list.value =  data.dataList || [];
      pager.total = data.totalCount || 0;
    }
    hasMore.value = !(list.value.length >= data.totalCount);
  }
  const fetchOrderList = async (loadMore) => {
    try {
			const data = await uni.$request.get(uni.$api.orderPage, {
				data: {
					begin: dayjs(new Date()).subtract(7, 'days').format("YYYY-MM-DD 00:00:00"),
          end: dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
          page: pager.page,
          size: pager.size,
          molds: 2,
          pay: 1,  // 已支付的订单
          containerId: containerId.value, // 货柜ID
				}
			});
      searchCallBack(data || [], loadMore);
		} catch (error) {
			console.error("error:", error);
		}
  }
  const search = (loadMore) => {
    fetchOrderList(loadMore);
  }

  const loadMoreData = () => {
    if (!hasMore.value) {
      return ;
    }
    pager.page = pager.page + 1;
    search(true);
  }
  const refreshData = () => {
    pager.page = 1;
    search();
  }

  onShow(() => {
    login.value = isLogin();
    containerId.value = getStorage("containerId")
    if (login.value) {
      fetchOrderList();
    } else {
      getWeiXinCode((code) => {
        wxLogin(code).then((tokenObj) => {
          setStorage("token", tokenObj.tokenValue);
          login.value = true;
          fetchOrderList();
        });
      });
    }
  });
</script>
<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100vh;
  .scroll-wraper {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding-top: 24upx;
    .order-item {
      background-color: #fff;
      border-radius: 24upx;
      margin-bottom: 24upx;
      padding: 30upx;
      box-sizing: border-box;
      .order-time {
        color: #1f1f1f;
        font-size: 28upx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .order-c {
        margin-top: 30upx;
        display: flex;
        justify-content: space-between;
        .product-list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          max-width: 550upx;
          flex-wrap: wrap;
          .product-logo {
            width: 150upx;
            height: 150upx;
            border-radius: 10upx;
            margin-right: 20upx;
            margin-bottom: 20upx;
          }
        }
      }
      .desc {
        color: #1f1f1f;
        font-size: 26upx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: right;
        margin-top: 30upx;
      }
      .amount {
        color: #1f1f1f;
        font-size: 30upx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: right;
      }
    }
  }
}
</style>